import { Authenticator, ThemeProvider } from '@aws-amplify/ui-react'; import { AuthStyle } from './AuthStyle'; import { Example } from '@/components/Example'; import { Fragment } from '@/components/Fragment'; ## Styling You can customize the Authenticator's default style by using [CSS variables](../../theming/css-variables). ### CSS style The example below uses a `<style>` tag to change the default colors to a dark theme: ```css [data-amplify-authenticator] { --amplify-colors-background-primary: var(--amplify-colors-neutral-90); --amplify-colors-background-secondary: var(--amplify-colors-neutral-100); --amplify-colors-brand-primary-10: var(--amplify-colors-teal-100); --amplify-colors-brand-primary-80: var(--amplify-colors-teal-40); --amplify-colors-brand-primary-90: var(--amplify-colors-teal-20); --amplify-colors-brand-primary-100: var(--amplify-colors-teal-10); --amplify-colors-font-interactive: var(--amplify-colors-white); --amplify-components-tabs-item-active-color: var(--amplify-colors-white); --amplify-components-tabs-item-focus-color: var(--amplify-colors-white); --amplify-components-tabs-item-hover-color: var(--amplify-colors-orange); } ``` <Example> <AuthStyle /> </Example> <Fragment platforms={['react']}> {({ platform }) => import(`./customization.styling.${platform}.mdx`)} </Fragment> ## Additional CSS Styling You can also override the authenticator's `amplify-*` classes. For example, if you'd like to hide the sign up tab, you can override the `amplify-tabs` class. ```css .amplify-tabs { display: none; } ``` <Example> <style>{` .customization-hide-sign-up .amplify-tabs { display: none; } `}</style> <Authenticator className="customization-hide-sign-up" /> </Example> If you'd like to update the primary color of your submit button you can override the `amplify-button` class. ```css .amplify-button[data-variation='primary'] { background: linear-gradient( to right, var(--amplify-colors-green-80), var(--amplify-colors-orange-40) ); } ``` <Example> <style>{` .customization-button .amplify-button[data-variation="primary"] { background:linear-gradient(to right, var(--amplify-colors-green-80),var(--amplify-colors-orange-40) ); } `}</style> <Authenticator className="customization-button" /> </Example>